<template>
    <div class="mime-info-detail-wrap">
        <div class="info-detail-header">
            <div class="info-detail-header-content">
                <van-row>
                  <van-col span="6">
                    <div class="detail-img border-radius5">
                        <img :src="detailImg"/>
                    </div>
                  </van-col>
                  <van-col span="17" offset="1">
                      <h2 class="mime-info-detail-title">{{detailTitle}}</h2>
                      <van-row class="doctor-detail">
                          <van-col span="12">
                            主讲专家：{{detailDoctor}}
                          </van-col>
                          <van-col span="12">
                            <p class="seeNumCount text-align-r">
                              <label class="seeNumCount-icon"></label>
                              {{detailCount}}人阅读
                            </p>
                          </van-col>
                      </van-row>
                  </van-col>
                </van-row>
            </div>
        </div>
        <div class="padding-12">
          <div class="detail-content-title"><span></span>病例介绍</div>
          <div class="mime-info-detail-content detail-content" v-html="detailContent" @click="previewImage"></div>
        </div>
        <!-- 音频 -->
        <div class="audio-box">
            <div class="audio-container">
                <div class="audio-view clearfix">
                    <div class="audio-left fl">
                        <h3 class="audio-title">{{detailTitle}}</h3>
                        <p>
                          <span>{{detailDoctor}}</span>
                          <span>{{duration}}</span>
                        </p>
                    </div>
                    <div class="audio-right fr">
                        <div class="audio-control" @click="playPause" :class="isPlaying ? 'audio-stop' : 'audio-play'"></div>
                    </div>
                </div>
                <!-- 播放进度条 -->
                <div class="audio-setbacks">
                    <span class="audio-setbacks-line"></span>
                    <i class="audio-setbacks-btn"></i>
                </div>
            </div>
        </div>
         <audio :src="audioUrl" ref="audioDom" @ended="onEnded"></audio>

        <!--评论-->
        <div class="comment-wrap">
          <h4>评论</h4>
          <van-list
            v-model="isUploading"
            :finished="isUpfinished"
            :finished-text=" commentList.length === 0 ? '暂无评论' : '没有更多了' "
            @load="onLoad"
          >
            <ul class="comment-list">
              <li v-for="(item,index) in commentList" :key="index">
                <van-row>
                  <van-col span="3">
                    <div class="comment-portrait">
                      <img :src="item.user_avatar">
                    </div>
                  </van-col>
                  <van-col span="20" offset="1">
                    <h5>{{item.user_name}}</h5>
                    <p>{{item.content}}</p>
                    <span>{{item.publish_at}}</span>
                  </van-col>
                </van-row>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 底部-->
        <div class="info-footer">
          <div class="info-foot-wrap">
            <van-row class="text-align-c">
              <van-col span="8">
                <div @click="showCommentMask">
                  <div class="div-icon comment-icon"></div>
                  <span>{{commentNum}}</span>
                </div>
              </van-col>
              <van-col span="8">
                <div class="div-icon thumps-up-icon" @click="changeStatus" :class="likeStatus ? 'active' : ''"></div>
                <span :class="likeStatus ? 'active' : ''">{{likeNum}}</span>
              </van-col>
              <van-col span="8">
                <div class="div-icon star-icon" @click="starClick" :class="collectStatus ? 'active' : ''"></div>
                <span :class="collectStatus ? 'active' : ''">{{collectedNum}}</span>
              </van-col>
            </van-row>
          </div>
        </div>
        <!--评论遮罩-->
        <div class="comment-mask-wrap" v-if="showComment">
          <div class="comment-mask-contain">
            <div class="comment-mask-close text-align-r">
              <van-icon name="cross" @click="closeCommentMask"/>
            </div>
            <div class="comment-mask-textarea">
              <van-field
                v-model="message"
                type="textarea"
                placeholder="留下自己观点"
                autofocus="autofocus"
                ref="textArea"
              />
            </div>
            <div class="comment-mask-submit text-align-r">
              <van-button type="info" @click="sumbitComment">发送</van-button>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import Cookie from 'js-cookie'
  import wxapi from '../../module/wxapi'
  import { Row, Col, Checkbox, Button ,Field, List, Icon, ImagePreview } from 'vant'

    export default {
      name: "MimeInfoDetail",
      components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Checkbox.name]: Checkbox,
        [Button.name]: Button,
        [Field.name]: Field,
        [List.name]: List,
        [Icon.name]: Icon,
      },
      mounted(){
        this.id = this.$route.query.id
        this.audioDom = this.$refs.audioDom
        this.getInfoData()
        this.getCommentData()
        this.userInfo = JSON.parse(Cookie.get('userInfo'))
        this.userPortrait = this.userInfo.avatar ? this.userInfo.avatar : '/static/images/user-portrait-default.png'
        this.userName = this.userInfo.nickname ? this.userInfo.nickname : this.userInfo.phone
        wxapi.wxRegister(this.wxRegCallback, window.location.href)
      },
      data(){
        return{
          audioDom:null,
          id:1,
          CDNimgUrl: this.GLOBAL.CDNimgUrl,
          detailTitle:'',
          detailContent:'',
          detailCount:null,
          detailImg:'',
          detailDoctor:'',
          message:'',
          likeStatus:false,
          likeNum:0,
          audioUrl:'',
          isPlaying:false,
          time:null,
          commentList:[],
          currentTimes:'',
          userInfo:null,
          userName:'',
          userPortrait:'',
          page: 0,
          isUploading: false,
          isUpfinished: false,
          collectStatus:false,
          showComment:false,
          collectedNum:0,
          commentNum:0,
          duration:''
        }
      },
      methods:{
        getInfoData(){
          ajax.doAction({
            url: '/case/'+this.id,
            type: 'GET',
            successCallback:(data)=>{
              // console.log(data);
              let datas = data.data
              this.detailTitle = datas.title
              this.detailImg = this.CDNimgUrl + datas.image
              this.detailDoctor = datas.doctor
              this.detailContent = datas.content
              this.audioUrl = this.CDNimgUrl + datas.file_url
              this.detailCount = datas.clicks > 9999 ? (datas.clicks/10000).toFixed(1) + '万' : datas.clicks
              this.collectStatus = datas.is_collected
              this.likeStatus = datas.is_liked
              this.likeNum = datas.liked_num
              this.commentNum = datas.comment_num
              this.collectedNum = datas.collected_num
              this.duration = datas.duration
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          });
        },
        //点赞
        changeStatus(){
          this.likeStatus = !this.likeStatus
          this.likeNum = this.likeStatus ? parseInt(this.likeNum)+1 : parseInt(this.likeNum)-1
          ajax.doAction({
            url: '/case/'+ this.id +'/like',
            type: 'POST',
            items:{
              status:this.likeStatus
            },
            successCallback:(data)=>{
              // console.log(data);
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          })
        },
        //收藏
        starClick(){
          this.collectStatus = !this.collectStatus
          ajax.doAction({
            url: '/case/'+ this.id +'/collect',
            type: 'POST',
            items:{
              status:this.collectStatus
            },
            successCallback:(data)=>{
              // console.log(data);
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          })
        },
        //暂停和播放
        playPause(){
          this.isPlaying = !this.isPlaying
          // console.log('this.isPlaying',this.isPlaying)
          if(this.isPlaying){
            this.audioDom.play()
            this.playProgress()
          }else{
            this.audioDom.pause()
          }
        },
        //进度条
        playProgress(){
          clearInterval(this.time)
          this.time = setInterval(()=>{
            let audioSetbacks = document.getElementsByClassName('audio-setbacks')[0]
            let audioSetbacksBtn = document.getElementsByClassName('audio-setbacks-btn')[0]
            let audioSetbacksLine = document.getElementsByClassName('audio-setbacks-line')[0]
            let scale1 = this.audioDom.currentTime/this.audioDom.duration
            audioSetbacksLine.style.width = (audioSetbacks.offsetWidth - audioSetbacksBtn.offsetWidth) * scale1+'px'
          },1000)
        },
        //音频结束
        onEnded(){
          this.isPlaying = false
          clearInterval(this.time)
        },
        //评论列表
        getCommentData(){
          this.page++
          ajax.doAction({
            url: `/case/${this.id}/commentList?page=${this.page}`,
            type: 'GET',
            successCallback:(data)=>{
              // console.log(data);
              let datas = data.data;
              this.isUploading = false
              if (datas.length > 0) {
                this.commentList = this.commentList.concat(datas)
              } else {
                this.isUpfinished = true
              }
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          })
        },
        onLoad () {
          // console.log('上拉加载'+this.page);
          this.getCommentData()
        },
        //发表评论
        sumbitComment(){
          ajax.doAction({
            url: '/case/'+ this.id +'/comment',
            type: 'POST',
            items:{
              content:this.message
            },
            successCallback:(data)=>{
              // console.log(data);
              let date1 = new Date()
              let currentDate = date1.toLocaleDateString().split('/').join('-')
              let currentTime = date1.toTimeString().slice(0,5)
              this.currentTimes = currentDate +'\xa0\xa0'+ currentTime
              this.commentList.unshift({
                'user_avatar':this.userPortrait,
                'user_name':this.userName,
                'content':this.message,
                'publish_at':this.currentTimes
              })
              this.message = ''
              this.showComment = false
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          })
        },
        showCommentMask(){
          this.showComment = true
          setTimeout(()=>{
            let textDom = this.$refs.textArea
            textDom.focus()
          },200)
        },
        closeCommentMask(){
          this.showComment = false
        },
        previewImage(e){
          // console.log(e.target.nodeName)
          // console.log(e.target.currentSrc)
          ImagePreview({
            images: [
              e.target.currentSrc
            ],
            className: 'preview-images'
          });
        },
        wxRegCallback () {
          // 用于微信JS-SDK回调
          this.wxShareTimeline()
          this.wxShareAppMessage()
        },
        wxShareTimeline () {
          // 微信自定义分享到朋友圈
          let option = {
            title: this.detailTitle, // 分享标题, 请自行替换
            link: window.location.href, // 分享链接，根据自身项目决定是否需要split
            imgUrl: 'http:' + this.detailImg, // 分享图标, 请自行替换，需要绝对路径
            success: () => {
              ajax.doAction({
                url: '/user/shareSuccess',
                type: 'POST',
                successCallback:(data)=>{
                  // console.log(data)
                },
                errorCallback: (data)=> {
                  console.log('请求失败')
                }
              });
            },
            error: () => {
              alert('已取消分享')
            }
          }
          // 将配置注入通用方法
          wxapi.ShareTimeline(option)
        },
        wxShareAppMessage () {
          // 微信自定义分享给朋友
          let option = {
            title: this.detailTitle, // 分享标题, 请自行替换
            // desc: this.detailContent, // 分享描述, 请自行替换
            link: window.location.href, // 分享链接，根据自身项目决定是否需要split
            imgUrl: 'http:' + this.detailImg, // 分享图标, 请自行替换，需要绝对路径
            success: () => {
              ajax.doAction({
                url: '/user/shareSuccess',
                type: 'POST',
                successCallback:(data)=>{
                  // console.log(data)
                },
                errorCallback: (data)=> {
                  console.log('请求失败')
                }
              });
            },
            error: () => {
              alert('已取消分享')
            }
          }
          // 将配置注入通用方法
          wxapi.ShareAppMessage(option)
        }
      },
      destroyed() {
        clearInterval(this.time)
      }
    }
</script>

<style>
@import "../../../static/css/audio.css";

.mime-info-detail-wrap{
  padding-bottom: 55px;
}
.mime-info-detail-wrap .detail-img{
  height: 80px;
  width: 80px;
  overflow: hidden;
}
.mime-info-detail-wrap .info-detail-header{
  background:url('/static/images/college-card-bg.png') no-repeat center;
  width:100%;
  height:125px;
  background-size:100% 100%;
  color:#fff;
}
.mime-info-detail-wrap .info-detail-header .info-detail-header-content{
  padding:22px 12px
}
.mime-info-detail-wrap .mime-info-detail-title{
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.mime-info-detail-wrap .doctor-detail{
  font-size:11px;
  color:#fff;
  margin-top:10px
}
.mime-info-detail-wrap .detail-content-title{
  font-size:16px;
  font-weight:bold;
}
.mime-info-detail-wrap .detail-content-title span{
  float:left;
  width:6px;
  border-radius:20px;
  height:16px;
  background:#0085ca;
  margin-right:5px
}
.mime-info-detail-wrap .detail-content {
  padding: 20px 0;
}
.mime-info-detail-wrap .mime-info-detail-footer p{
  color: #9A9A9A;
  font-size: 13px;
  font-weight: lighter;
}
.mime-info-detail-wrap .seeNumCount-icon{
  display: inline-block;
  background: url("/static/images/reading-icon.png") no-repeat center;
  width: 10px;
  height: 12px;
  background-size: 100% 100%;
  margin-right: 3px;
}
.mime-info-detail-wrap .comment-wrap h4{
    background: #f4f4f4;
    padding-left: 12px;
    line-height: 25px;
}
</style>
